<!--  -->
<template>
  <div class="reverse-chose-course">
    <div class="chose-course-top">
      <span
        class="back-arrow"
        @click="handleBack"
      ></span>
      <span class="course-title">{{ showTitle }}</span>
      <a @click="choseCourse">选择课程</a>
    </div>
    <div class="list-wrap">
      <div class="list-content list-colum-width">
        <div
          class="chapter-item list-colum-width"
          :class="{
            'list-mark1': +item.complete === 0,
            'list-mark2': +item.complete === 1,
            'list-mark3': +item.complete === 2,
            'list-mark4': +item.complete === 3,
            'list-mark5': +item.complete === 4,
          }"
          v-for="item in chapterList"
          :key="item.id"
          @click="chapterClickHandle(item)"
        >
          <span class="chapter-title">{{ item.title }}</span>
          <span class="chapter-finish">{{ item.finish + "%" }}</span>
        </div>
        <div class="list-colum-width blank-seat"></div>
        <div class="list-colum-width blank-seat"></div>
      </div>
      <Empty v-if="!chapterList.length"></Empty>
    </div>
    <choseModal
      :visible.sync="visible"
      :courseList="courseList"
      @courseClick="courseClickHandle"
    />
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { fetchMycurriculum, fetchChapterList } from "@/services/reverse";
import { mapMutations, mapState } from "vuex";
import Empty from "@/components/Empty";
import choseModal from "./choseModal";
import { SUCCESS_CODE } from "@/utils/const";
import Timetips from "@/components/Timetips";
export default {
  components: {
    choseModal,
    Empty,
    Timetips
  },
  data() {
    return {
      visible: false,
      courseList: [],
      chapterList: [],
      choseIds: {
        curr_id: "",
        chapters_id: "",
        name: "",
        pack_name: "",
      },
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
    }),
    showTitle: function() {
      return this.choseIds.pack_name ? `${this.choseIds.pack_name}·专题列表` : '专题列表';
    },
  },
  watch: {},
  methods: {
    ...mapMutations(["setReverseStatus"]),
    async choseCourse() {
      let res = await fetchMycurriculum({
        question_type: 3,
      });
      if (res.code === SUCCESS_CODE) {
        this.courseList = res.data.filter((v) => v.question_type === 3);
        if (this.courseList.length) {
          this.visible = true;
        } else {
          this.$message.error('请先购买课程~')
        }
      }
    },
    async courseClickHandle(item) {
      this.choseIds.pack_name = item.title;
      let res = await fetchChapterList({ curr_id: item.id });
      if (res.code === SUCCESS_CODE) {
        this.chapterList = res.data.list;
        this.visible = false;
      } else {
        this.$message.error("对不起！课程修订内容中，请稍后...");
      }
      this.choseIds.curr_id = item.id;
    },
    chapterClickHandle(item) {
      console.log(item);
      this.choseIds.chapters_id = item.id;
      this.choseIds.name = item.title;
      this.$nextTick(() => {
        this.setReverseStatus(this.choseIds);
        this.$router.push({
          path: "/reverse",
          query: this.choseIds,
        });
      });
    },
    handleBack () {
      this.$router.replace({
        path: '/reverse',
        query: {
          isBack: true
        }
      })
    }
  },
  async created() {
    // 如果有课程id 直接获取专题列表
    let { chapters_id, curr_id, pack_name } = this.reverseStatus;
    this.choseIds = {
      curr_id: curr_id,
      chapters_id: chapters_id,
      pack_name: pack_name,
    };
    // 如果学习过课程进来的默认赋值 curr_id, 因为不需要选课程，不提前set会丢参
    if (this.choseIds.curr_id) {
      let res = await fetchChapterList({ curr_id: curr_id });
      if (res.code === SUCCESS_CODE) {
        this.chapterList = res.data.list;
      }
    } else {
      console.log("111");
      // 否则先获取课程
      let courses = await fetchMycurriculum({ question_type: 3 });
      if (courses.code === SUCCESS_CODE) {
        this.courseList = courses.data;
      }
      this.$nextTick(() => {
        // 如果只有一个课程无需选择
        if (this.courseList.length === 1) {
          this.courseClickHandle(this.courseList[0]);
        } else if (this.courseList.length > 1) {
          // 如果有多个则弹框
          this.visible = true;
        }
      });
    }
  },

  mounted() {},
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import "@/style/var.less";
.reverse-chose-course {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .chose-course-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    font-size: 20px;
    .back-arrow {
      width: 30px;
      height: 27px;
      background-image: url("~assets/home/btn_back.png");
      background-size: 100%;
      cursor: pointer;
    }

    .course-title {
      font-size: 20px;
      font-weight: 700;
    }
  }

  .list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 30px 40px;
    .list-content {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
    }
  }
  .chapter-item {
    display: inline-block;
    box-sizing: border-box;
    height: 160px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    padding: 40px 0 40px 50px;
    margin-bottom: 20px;
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-position: right bottom;
    box-sizing: border-box;
    &:nth-child(2n) {
      margin-right: 0;
    }
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }

    &.list-mark1 {
      background-image: url("~assets/reverse/list-mark1.png");
    }
    &.list-mark2 {
      background-image: url("~assets/reverse/list-mark2.png");
    }
    &.list-mark3 {
      background-image: url("~assets/reverse/list-mark3.png");
    }
    &.list-mark4 {
      background-image: url("~assets/reverse/list-mark4.png");
    }
    &.list-mark5 {
      background-image: url("~assets/reverse/list-mark5.png");
    }
    text-align: left;
    span {
      display: block;
    }
    .chapter-title {
      .no-rem-fontsize(30px);
      font-weight: 700;
    }
    .chapter-finish {
      .no-rem-fontsize(20px);
    }
  }
  @media screen and (max-width: 1200px) {
    .chapter-item {
      margin-right: 0 !important;
    }
  }
}
</style>
